<template>
    <view :style="{'--color': color}">
        <status-bar title='更多众筹' :goHome='fromShare'></status-bar>
        <view class="padding30-20">
            <view class="d-flex a-center p-left20 p-bot30"> 
                <picker mode="selector" :range="brands" range-key="bussName" @change="brandChange">
                    <view class="m-right40">
                        <text class="size26">{{ bussName ? bussName : '品牌项目' }}</text>
                        <text class="iconfont icon-xiangxia1 bold"></text>
                    </view>
                </picker>
                <picker mode="selector" :range="regions" range-key="RegionName" @change="regionChange">
                    <view>
                        <text class="size26">{{ regionName ? regionName : '所在地区' }}</text>
                        <text class="iconfont icon-xiangxia1 bold"></text>
                    </view>
                </picker>
            </view>
            <view class="item bgf8 bor_radius_6 padding20 d-flex m-bot20" v-for="(item,index) in storeList" :key="index" @click="handleJoin(item)">
                <image :src="$imgUrls(item.logo)" mode="aspectFill"></image>
                <view class="p-left20 flex-1">
                    <view class="m-bot10">
                        <text class="label m-right10 d-inline-block">{{ item.bussName }}</text>
                        <text class="size28 color_33 bold">{{ item.storeName }}</text>
                    </view>
                    <view class="d-flex j-sb a-center m-bot10">
                        <view class="h6 color_66 flex-1 m-right10">{{ item.address }}</view>
                        <view class="size26 color_6d">{{ item.distance }}km</view>
                    </view>
                    <view class="d-flex color_66">
                        <view class="size30 m-right30">众筹数: {{item.this_crowdfunding_num}}/{{ item.crowdfunding_num }}</view>
                        <view class="size30">众筹费: ￥{{ item.crowdfunding_money }}</view>
                    </view>
                </view>
            </view>

            <empty v-if="noData" cat='3' msg='您还没有相关的店铺'></empty>
        </view>

        <!-- 加盟弹窗 -->
        <view class="mask flexac" v-if="showPop" @click="showPop = false">
            <view class="viewbox600 bgwhite" @click.stop>
                <view class="pop line50">
                    <view class="size36 bold m-bot30 text-center">店铺众筹</view>
                    <view>正在众筹“{{ storeItem.storeName }}”</view>
                    <view>所属{{ storeItem.bussName }}</view>
                    <view>归属 {{ storeItem.location }}</view>
                    <view>需要支付:<text class="size36 color_FOD bold m-left20">￥{{ storeItem.crowdfunding_money }}</text></view>
                    <view class="color_FOD bold" v-if="storeItem.earnest_money">其中: {{ storeItem.earnest_money }}元将作为保证金留存</view>
                </view>
                <view class="btns d-flex">
                    <view class="flex-1 flexac bgCC color_66" @click="showPop = false">暂不众筹</view>
                    <view class="flex-1 flexac thmeBg white" @click="confirm">确认众筹</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return {
            fromShare: 0,
            bussId: '',
            bussName: '',
            brands: [],
            regionCode: '',
            regionName: '',
            regions: [],
            storeList: [],
            storeItem: '',
            showPop: false,
            noData: false,
            page: 1,
            pageNum: 10,
            noMore: false
        }
    },
    computed: {
        ...mapState(['color','position'])
    },
    async onLoad(e){
        if(e.fromShare) this.fromShare = e.fromShare
        this.getList()
        this.getBussList()
        this.getRegion()
        if(this.position.longitude == 0){
            await this.$pop.getLocation()
            if(this.position.longitude){
                this.noMore = false
                this.page = 1
                this.getList()
            }
        }
    },
    methods: {
        brandChange(e){
            console.log(e.detail.value) // 值为下标
            let current = this.brands[e.detail.value]
            this.bussId = current.bussId || ''
            this.bussName = current.bussName || ''
            this.noMore = false
            this.page = 1
            this.getList()
        },
        regionChange(e){
            let current = this.regions[e.detail.value]
            this.regionCode = current.RegionCode || ''
            this.regionName = current.RegionName || ''
            this.noMore = false
            this.page = 1
            this.getList()
        },
        getList(){ // 经纬度默认会传
            this.$http.post({
                url: '/osmxcxApi/getStoreList',
                data: {
                    bussId: this.bussId,
                    regionCode: this.regionCode,
                    getType: '2',
                    page: this.page,
                    pageNum: this.pageNum
                }
            }).then(res=>{
                let result = res.data || []
                this.storeList = this.page == 1 ? result : this.storeList.concat(result)
                if(result.length < this.pageNum) this.noMore = true

                if(this.storeList.length){
                    this.noData = false
                }else{
                    this.noData = true
                }
            })
        }, 
        getBussList(){ // 获取品牌项目
            this.$http.post({
                url: '/osmxcxApi/getStoreBussList'
            }).then(res=>{
                this.brands = res.data || []
            })
        },
        getRegion(){
            this.$http.post({
                url: '/singleSaleApi/getAdministrativeDivision',
                data: {
                    regioncode: "0" // 一级不含区
                }
            }).then(res=>{
                if(res.code != 200) return
                this.regions = res.data || []
            })
        },
        handleJoin(item){
            this.storeItem = item
            this.showPop = true
        },
        confirm(){ // 确认加盟
            this.showPop = false
            this.toUrl('/joinPage/agreement?type=2&store_id=' + this.storeItem.store_id)
        }
    },
    onReachBottom(){
        if(this.noMore) return
        this.page ++ 
        this.getList()
    }
}
</script>

<style lang="scss" scoped>
.item {
    image {
        width: 120rpx;
        height: 120rpx;
    }
    .label {
        padding: 4rpx 10rpx;
        background: #990000;
        border-radius: 10rpx;
        font-size: 22rpx;
        color: #fff;
    }
}
.pop {
    padding: 30rpx 60rpx 60rpx 60rpx;
    view {
        font-size: 32rpx;
    }
}
.btns view {
    height: 80rpx;
    font-size: 28rpx;
}
</style>